<template>
  <view class="mine-container">
    <!--顶部个人信息栏-->
    <view class="header-section" @click="handleToEditInfo">
      <up-row customStyle="margin-bottom: 10px">
        <up-col span="2">
           <up-avatar size="60" :src="avatar" shape="square"></up-avatar>
        </up-col>
        <up-col span="9">
          <view v-if="nickName" class="user-info">
            <view class="u_title">
              {{ nickName }}
            </view>
          </view>
        </up-col>
        <up-col span="1">
          <up-icon name="arrow-right" color="#ffffff" size="20"></up-icon>
        </up-col>
      </up-row>
    </view>

    <view class="content-section">
      <view class="mine-actions grid col-4 text-center">
        <up-row justify="center">
          <up-col v-for="(gridListItem,gridListIndex) in gridList" :key="gridListIndex"
                  @click="gridItemClick(gridListItem)" :span="12/gridList.length">
            <view style="position: relative;">
              <up-badge :type="gridListItem.badgeType==undefined?'primary':gridListItem.badgeType" max="99"
                        v-if="gridListItem.isBadge==undefined?true:gridListItem.isBadge"
                        :value="gridListItem.badgeCount==undefined?1:gridListItem.badgeCount" :absolute="true"
                        :offset="gridListItem.badgeCount==undefined || gridListItem.badgeCount.toString().length<=1?[-5,34]:[-5,25]"></up-badge>
            </view>
            <up-icon :name="gridListItem.iconName==undefined?`level`:gridListItem.iconName" color="#708090" :size="28"
                     :label="gridListItem.title==undefined?`标题`:gridListItem.title" labelPos="bottom">
            </up-icon>
          </up-col>
        </up-row>
      </view>
      <view class="mine-actions grid col-4">
        <up-cell-group :border="false">
          <up-cell icon="setting" :iconStyle="{color:'#708090'}" title="应用设置" :isLink="true"
                   @click="handleToSetting"></up-cell>
        </up-cell-group>
      </view>
    </view>
  </view>
  <TabBar />
</template>

<script lang="ts" setup>
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
import { to } from 'await-to-js';
import { useUserStore } from '@/store/modules/user';
import useIMStore from '@/store/modules/im';

import { IMMessageType } from '@/enmus/IMMessageEnum';

const imStore = useIMStore();
const userStore = useUserStore();
const { nickName, avatar } = storeToRefs(userStore);
const gridList = ref([
  {
    //图标
    iconName: 'chat',
    //文字
    title: '消息',
    //跳转的页面路径
    navigatePath: '/pages/mine/message/list',
    //跳转的页面时携带的参数
    params: {},
    //是否显示微标数
    isBadge: true,
    //微标数数量
    badgeCount: computed(() => {
      return imStore.getPersonalCenterCount() || 0;
    }),
    //微标数类型
    badgeType: 'error'
  },
  {
    //图标
    iconName: 'chat',
    //文字
    title: '消息',
    //跳转的页面路径
    navigatePath: '/pages/mine/message/list',
    //跳转的页面时携带的参数
    params: {},
    //是否显示微标数
    isBadge: true,
    //微标数数量
    badgeCount: computed(() => {
      return imStore.getPersonalCenterCount() || 0;
    }),
    //微标数类型
    badgeType: 'error'
  },
  {
    //图标
    iconName: 'email-fill',
    //文字
    title: '聊天室',
    //跳转的页面路径
    navigatePath: '/pages/mine/chat-group/index',
    //跳转的页面时携带的参数
    params: {},
    //是否显示微标数
    isBadge: true,
    //微标数数量
    badgeCount: computed(() => {
      return imStore.msgCount.CHAT_GROUP || 0;
    }),
    //微标数类型
    badgeType: 'error'
  }
]);


const handleToEditInfo = () => {
  tab.navigateTo('/pages/mine/info/edit');
};
const handleToSetting = () => {
  tab.navigateTo('/pages/mine/setting/index');
};

//网格点击按钮
const gridItemClick = (item: any) => {
  if (!item.navigatePath) {
    return;
  }
  tab.navigateTo(`${item.navigatePath}?` + uni.$u.queryParams(item.params, true, 'repeat'));
};

const getUserInfo = () => {
  userStore.getInfo();
};

onLoad(() => {
  getUserInfo();
});

onUnload(() => {
});
</script>

<style lang="scss">
page {

  padding: 0px;
}

.colBox {
  position: relative;
}

.mine-container {
  width: 100%;
  height: 100%;

  .header-section {
    padding: 15px 15px 45px 15px;
    background-color: #708090;
    color: white;

    .login-tip {
      font-size: 18px;
      margin-left: 10px;
    }

    .cup-avatar {
      border: 2px solid #eaeaea;

      .icon {
        font-size: 40px;
      }
    }

    .user-info {
      margin-left: 15px;

      .u_title {
        font-size: 18px;
        line-height: 30px;
      }
    }
  }

  .content-section {
    position: relative;
    top: -50px;

    .mine-actions {
      margin: 15px 15px;
      padding: 10px 0px;
      border-radius: 8px;
      background-color: white;
    }
  }
}
</style>
